/**
* Description: 执行明细
*
* Created by hrx on 2023/9/25
*/
<template>
  <div class="compliance-record-desc">
    <el-drawer
      class="drawer"
      title="执行明细"
      v-model="drawer"
      direction="rtl"
      size="65%"
    >
      <div class="tablePage">
        <Table
          ref="tableRef"
          :not-data-img="$CONSTANTS.NOT_DATA_IMG"
          :table-columns="tableTitle"
          :remote-api="getComplianceRecordDescListApi"
          :autoLoad="false"
          :pageNumberList="[10, 20, 50, 100]"
          ppageFieldName="page"
          pnumberFieldName="limit"
        >
          <template #index="scope">
            {{ scope.index + 1 }}
          </template>
          <template #operate="scope">
            <el-button type="primary" class="edit-button" @click="checkHandHygieneRecordDetail(scope.row)">
              详情
            </el-button>
          </template>
        </Table>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import $CONSTANTS from '@/constants/globalConstants'
import {
  complianceRecordDTO,
  getComplianceRecordDescListApi,
  queryComplianceRecordDescParams
} from "@/api/complianceRecord";
import {ITableColumnItem} from "@/components/common/Table.vue";
import {type handHygieneRecordDTO} from "@/api/handHygieneRecord"
import {IBaseQueryDataListParams} from "@/api";
const emit = defineEmits(['checkHandHygieneRecordDetail']);
const tableRef = ref();

const form = reactive<IBaseQueryDataListParams<queryComplianceRecordDescParams>>({
  data: {
    id: 0
  }
})

const tableTitle: Array<ITableColumnItem> = [
  {label: "序号", prop: "index", width: 80, template: true},
  {label: "记录编号", prop: "washHandsRecordCode"},
  {label: "手卫生类型", prop: "washHandsTypeStr"},
  {label: "所在区域/点位", prop: "deviceRegionOrPosition"},
  {label: "完成状态", prop: "finishFlagStr"},
  {label: "得分", prop: "washHandsScore"},
  {label: "手卫生时长", prop: "washHandsDurationStr"},
  {label: "结果描述", prop: "resultDesc"},
  {label: "结束时间", prop: "endTime", width: 150},
  {label: "操作", prop: "operate", template: true, fixed: "right", width: 100},
]

const drawer = ref<boolean>(false)

const checkHandHygieneRecordDetail = (row: handHygieneRecordDTO) => {
  emit('checkHandHygieneRecordDetail', row)
}

const getListData = async (type: string) => {
  if (type === "search") {
    tableRef?.value?.refreshData(form);
  } else {
    tableRef?.value?.queryData(form);
  }
}

const init = (data: complianceRecordDTO) => {
  form.data.id = data.id
  getListData('getData');
}

defineExpose({
  drawer,
  init
})

</script>

<style lang="scss" scoped>
.compliance-record-desc {
  padding: 0px 20px 20px 20px;

  .searchLeft {
    float: left;
    display: flex;

    .dropdown {
      width: 120px;
      margin-left: 10px;
    }
  }

  .searchRight {
    float: right;
    display: flex;

    .cascader {
      width: 240px;
    }

    .right20 {
      width: 160px;
      margin-left: 10px;
      height: 40px;
    }

    .searchBtn {
      margin-left: 10px;
    }
  }
}

.tablePage {
  padding: 20px;
  height: 100%;
}
</style>